import React, { PureComponent, Fragment } from 'react'
import { connect } from 'react-redux'
import {
  ListItem,
  ListInfo,
  LoadMore
} from '../style'

import { Link } from 'react-router-dom'

import { actionCreators } from '../store'
class List extends PureComponent {
  render() {
    const { list, getMoreList,page } = this.props
    return (
      <Fragment>
        {
          list.map((item,index) => {
            return (
              <ListItem key={index}>
                <ListInfo >
                  <Link to={'/detail/'+item.get('id')}><h3 className="title">{item.get('title')}</h3></Link>
                  <p className="desc">{item.get('desc')}</p>
                </ListInfo>
                <Link to={'/detail/'+item.get('id')}><img className="pic" src={item.get('imgUrl')} alt="备用" /></Link>
              </ListItem>
            )
          })
        }
        <LoadMore onClick={()=>{getMoreList(page)}}>加载更多</LoadMore>
      </Fragment>

    )
  }
}

const mapState = (state) => ({
  list: state.getIn(['home', 'articleList']),
  page: state.getIn(['home','articlePage'])
})

const mapDispatch = (dispatch)=>({
  getMoreList(page){
    dispatch(actionCreators.getMoreList(page))
  }
})

export default connect(mapState, mapDispatch)(List)